import React from 'react';
import Block from 'fs-flex';
import { Card,Picker,List,Radio,Button,Toast,Modal} from 'antd-mobile';
import Header from '../../../../components/Header';
import styles from './index.less';
import BusinessTimeService from '../../../../services/businessTimeSrevice';
import Canstant from '../../../../utils/constant'

const alert = Modal.alert;

class BusinessTimeMannag extends React.Component{
    state={
        settings:[],
    }
    async componentDidMount(){
        const {code,data}=await BusinessTimeService.buinessTimeList()
        if(code===Canstant.responseOK){
            this.setState({settings:data})
        }
    }
    // 选择
    dateSelectChange=(value)=>{
        this.setState({
            dateValue:value
        })
    }
    //单选按钮
    radioChange(val){
        this.setState({
            radioValue:val
        })
    }
    
    // 选中日期
    choiseDate=(item,date)=>{
        let {settings}=this.state
        settings.map((value,index)=>{
            if(value.id===item.id){
                value.dayId=date[0]
            }
        })
        this.setState({settings})
    }

    setStartOrEnd=(item,status)=>{
        let {settings}=this.state
        settings.map((value,index)=>{
            if(value.id===item.id){
                value.startOrEnd=status
            }
        })
        this.setState({settings})
    }

    //submit提交修改
    async submit(){
        const settings=this.state.settings
        if(!settings){
            Toast.fail('请设置相关内容',2)
        }
        for(const item of settings){
            if(!item.dayId){
                Toast.fail(`请设置 '${item.businessType}' 日期`,2)
                return
            }
            if(!item.startOrEnd){
                Toast.fail(`请勾选 '${item.businessType}' 处理时间（${item.dayId} 号之前/之后）`,2)
                return
            }
        }
        alert('提示', '确定保存设置吗?', [
            { text: '再想想', onPress: () => console.log('cancel'), style: 'default' },
            { text: '确定', onPress: () => this.updateSettins(settings)},
          ]);
    }
    async updateSettins(data){
        const {code}=await BusinessTimeService.buinessTimeUpdate(data)
        if(code===Canstant.responseOK){
            Toast.success('提交保存成功',2)
            setTimeout(() => {
                this.props.history.push({pathname:'/manage/setting'})
            }, 1000);
        }
    }
    renderItem=(seasons)=>{
        const {settings} =this .state
        if(settings && settings.length>0){
            return (
                settings.map((item,index)=>{
                  console.log("item.businessTypeName: "+item.businessTypeName)
                    let number=item.dayId //当前选中日期
                    let startOrEnd=item.startOrEnd //当前设置：日期之前/之后 
                    return <Block mt={15} ml={5} mr={5} key={'item'+index}>
                        <Card full>
                            <Card.Header
                                style={{fontSize:'15px'}}
                                title={item.businessTypeName}
                            />
                            <Card.Body className={styles.radioStyle}>
                                <Picker
                                    data={[seasons]}
                                    title="选择日期"
                                    cascade={false}
                                    cols={1}
                                    extra="选择日期"
                                    value={[parseInt(number)]}
                                    onOk={v=>this.choiseDate(item,v)}
                                    >
                                    <List.Item arrow="horizontal">选择日期</List.Item>
                                </Picker>
                                <Block hf>
                                    <Block f={1} className={startOrEnd === 'E'?styles.redioBoxChecked:null} onClick={()=>this.setStartOrEnd(item,'E')}>
                                        <Radio.RadioItem checked={startOrEnd === 'E'}>
                                            {number?number+' 号':null}以前
                                        </Radio.RadioItem>
                                    </Block>
                                    <Block f={1} className={startOrEnd === 'S'?styles.redioBoxChecked:null} onClick={()=>startOrEnd=this.setStartOrEnd(item,'S')}>
                                        <Radio.RadioItem checked={startOrEnd === 'S'}>
                                            {number?number+' 号':null}以后
                                        </Radio.RadioItem>
                                    </Block>
                                </Block>
                            </Card.Body>
                            {/* <Card.Footer content="footer content" extra={<div>extra footer content</div>} /> */}
                        </Card>
                    </Block>
                })
            )
        }
    }

    render(){
        const seasons=Array.from(new Array(31)).map((_val, i) => {
            i++
            return {
                label: `${i} 号`,
                value: i,
              }
        });
        return(
            <Block vf>
                <Block f={1} mb={50}>
                    <Block>
                        <Header needBack="ture" title='业务办理时间' history={this.props.history}/>
                    </Block>
                    <Block vf>
                        {
                            this.renderItem(seasons)
                        }
                    </Block>
                </Block>
                <Block h={50} a='c' j='c' p={5}  className={styles.submitBtn}>
                    <Block f={1} mr={10}>
                        <Button onClick={this.submit.bind(this)} type='primary' icon="check-circle-o">保存</Button>
                    </Block>
                </Block>
            </Block>
        )
    }
}

export default BusinessTimeMannag;
